<template>
  <a-modal width="80%" v-model:visible="store.state.user.add_status" title="工件库" @ok="handleOk" @cancel="handleCancel"
           :okText="'确认'" :cancel-text="'取消'" :ok-button-props="{ disabled: !dic_data.params.partNo}">
    <div class="template_box" v-if="select_list_status">
      <!--    查询-->
      <div class="template_search">
        <div class="template_search_box">
          <div class="title">工件名称：</div>
          <a-input disabled placeholder="请输入搜索内容"/>
        </div>
        <div class="template_search_box">
          <div class="title">工件图号：</div>
          <a-input disabled placeholder="请输入搜索内容"/>
        </div>
        <div class="template_search_box">
          <div class="title">工件编号：</div>
          <a-input disabled placeholder="请输入搜索内容"/>
        </div>
        <div class="template_search_box">
          <a-button style="margin-right: 10px" type="primary" disabled>查询</a-button>
          <a-button type="primary" disabled>重置</a-button>
        </div>
      </div>
      <a-table :pagination="false" bordered :dataSource="dic_data.data_list" :columns="columns" :scroll="{
      x:dic_data.width,y:dic_data.height
    }">
        <template #action="{ record }">
          <a-popconfirm
              v-if="dic_data.data_list.length"
              title="确认为当前用户添加工件?"
              okText="确认"
              cancelText="取消"
              @confirm="confirm(record.key)"
              :style="{cursor: 'pointer'}"
          >
            <a>创建工件</a>
          </a-popconfirm>
        </template>

      </a-table>
    </div>
    <div v-if="!select_list_status">
      <div>
        <RollbackOutlined/>
      </div>
      <div class="row_box">
        <div class="column_box">
          <span>工件号</span>
          <a-input v-model:value="dic_data.params.partNo" placeholder="请输入工件号"/>
        </div>
      </div>
    </div>
    <!--    <template slot="footer">-->
    <!--      <a-button @click="handleCancel">确认</a-button>-->
    <!--    </template>-->
  </a-modal>
</template>

<script>
import {ref, reactive, inject} from "vue"
import {get_libPartInfo_list_all} from "@/api/device/lib_part";
import {handle_key} from "@/utils/handle_key";
import {useStore} from "vuex"
import {edit_partInfo} from "@/api/device/partInfo";
// import {RollbackOutlined} from "ant-design-vue";

export default {
  name: "partList",
  components: {
    // RollbackOutlined
  },
  setup(props, context) {
    let route_params = inject("route_params");//引入
    debugger
    const store = useStore()
    const columns = [
      {
        title: '工件名称',
        width: 100,
        dataIndex: 'cusName',
        key: 'cusName',
        // fixed: 'left',
      },
      {
        title: '工件图号',
        width: 100,
        dataIndex: 'partImgNo',
        key: 'partImgNo',
        // fixed: 'left',
      },
      {
        title: '工件编号',
        dataIndex: 'partName',
        key: 'partName',
        width: 150,
      },
      {
        title: '操作',
        key: 'operation',
        // fixed: 'right',
        width: 100,
        slots: {
          customRender: 'action',
        },
      },
    ]

    const dic_data = reactive({
      data_list: [],
      style: {
        height: 400,
        width: 600
      },
      params: {
        "id": 0,
        "bId": 0,
        "partNo": null,
        "cId": 0,
        "userId": 0,
        "partId": 0,
        "startTime": "",
        "endTime": "",
        "weldStatus": 0,
        "createTime": "",
        "createUserId": 0
      }
    })

    const visible = ref(false)
    const select_list_status = ref(true)
    const okText = ref(null)
    /**
     * 工件信息列表
     * */
    const get_libPartInfo = async () => {
      const res = await get_libPartInfo_list_all()
      if (res.code === 1) {
        dic_data.data_list = handle_key(res.data)
      }
    }

    /**
     * 初始化
     * */
    get_libPartInfo()

    /**
     * 确认
     * */
    const confirm = (key) => {
      dic_data.params.partId = dic_data.data_list[key].id
      dic_data.params.bId = route_params.bId;
      dic_data.params.cId = route_params.cId;
      dic_data.params.userId = route_params.userId;
      select_list_status.value = false;
    }

    const submit = async () => {
      const res = await edit_partInfo(dic_data.params)
      if (res.code === 1) {
        select_list_status.value = true;
        dic_data.params.partNo = null;
        context.emit("re_flash:re_flash", "")
      }
    }

    const handleOk = e => {
      console.log(e);
      store.commit("SET_ADD_ROLE", false)
      submit()
    };

    const handleCancel = () => {
      store.commit("SET_ADD_ROLE", false)
    }


    return {
      columns,
      dic_data,
      confirm,
      visible,
      handleOk,
      store,
      select_list_status,
      okText,
      handleCancel
    }
  },
}
</script>

<style scoped lang="scss">
.template_box {
  height: 100%;
  display: flex;
  flex-direction: column;
  font-size: 0.5rem;

  .template_search {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 1rem;

    .template_search_box {
      display: flex;
      flex-direction: row;
      width: 25%;
      justify-content: center;

      .title {
        width: 8rem;
        height: 2rem;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }

  .template_table {
    height: 100%;

    .template_add_btn {
      margin-bottom: 0.5rem;
      display: flex;
      justify-content: flex-start;
      align-items: center;
    }
  }
}
</style>
